<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid black;
            background-color: white;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Canvas dimensions
    const width = 500;
    const height = 450;
    canvas.width = width;
    canvas.height = height;

    // Parameters
    const cx = width / 2;
    const l_unit = 100; // A scaling factor for 'l' in pixels. The side length is 2*l_unit.
    const y_ground = height * 0.8;

    // Calculate vertex coordinates for an equilateral triangle
    const sideLength = 2 * l_unit;
    const h = sideLength * Math.sin(Math.PI / 3); // Height of the equilateral triangle
    const Ax = cx;
    const Ay = y_ground - h;
    const Bx = cx - l_unit;
    const By = y_ground;
    const Cx = cx + l_unit;
    const Cy = y_ground;

    // Clear canvas
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, width, height);

    // Set drawing styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;

    // Draw triangle ABC
    ctx.beginPath();
    ctx.moveTo(Ax, Ay);
    ctx.lineTo(Bx, By);
    ctx.lineTo(Cx, Cy);
    ctx.closePath();
    ctx.stroke();

    // Draw ground hatching
    const hatchLength = 15;
    const hatchSpacing = 15;
    const hatchAngle = Math.PI / 4;
    const oldLineWidth = ctx.lineWidth;
    ctx.lineWidth = 1;
    for (let x = Bx - hatchSpacing; x <= Cx + hatchSpacing; x += hatchSpacing) {
        ctx.beginPath();
        ctx.moveTo(x, Cy);
        ctx.lineTo(x - hatchLength * Math.cos(hatchAngle), Cy + hatchLength * Math.sin(hatchAngle));
        ctx.stroke();
    }
    ctx.lineWidth = oldLineWidth;

    // Draw the two small balls at vertex A
    const ballRadius = 3.5;
    const ballOffset = 8;
    ctx.beginPath();
    ctx.arc(Ax - ballOffset, Ay, ballRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(Ax + ballOffset, Ay, ballRadius, 0, 2 * Math.PI);
    ctx.fill();

    // --- Add Labels ---
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Vertex labels
    ctx.font = 'bold 20px Arial';
    ctx.fillText('A', Ax, Ay - 20);
    ctx.fillText('B', Bx - 20, By);
    ctx.fillText('C', Cx + 20, Cy);

    // Length labels '2l'
    ctx.font = 'italic 22px Times New Roman';
    // Side AB
    ctx.save();
    ctx.translate((Ax + Bx) / 2, (Ay + By) / 2); // Move origin to midpoint of AB
    ctx.rotate(-Math.PI / 3); // Rotate context to be parallel to the side
    ctx.textBaseline = 'bottom';
    ctx.fillText('2l', 0, -5);
    ctx.restore();

    // Side AC
    ctx.save();
    ctx.translate((Ax + Cx) / 2, (Ay + Cy) / 2); // Move origin to midpoint of AC
    ctx.rotate(Math.PI / 3); // Rotate context to be parallel to the side
    ctx.textBaseline = 'bottom';
    ctx.fillText('2l', 0, -5);
    ctx.restore();

    // Side BC
    ctx.textBaseline = 'bottom';
    ctx.fillText('2l', cx, Cy - 8);

    // Chinese Text Labels (using a common font that supports Chinese)
    ctx.font = '24px "SimSun", "KaiTi"';
    // "水平地面" (Horizontal Ground)
    ctx.textBaseline = 'top';
    ctx.fillText('水平地面', cx, Cy + 25);

    // "小球" (small ball) and "绳" (rope)
    ctx.font = '22px "SimSun", "KaiTi"';
    ctx.textBaseline = 'middle';
    ctx.fillText('小球', Ax - 55, Ay);
    ctx.fillText('小球', Ax + 55, Ay);
    ctx.fillText('绳', Ax, Ay + 20);

</script>
</body>
</html>